<script setup lang="ts">

import {onMounted, ref} from "vue";
import {reqUserAddress, reqRemoveAddress} from "@/api/user";
import {onLoad, onPullDownRefresh, onShow} from "@dcloudio/uni-app";
import {useCommonStore} from "@/store/common";

const commonStore = useCommonStore()

let siteList = ref<any>([])

const toAddSite = () => {
  uni.navigateTo({
    url: '/pages/user/setting/addSite/addSite'
  });
}


async function getAddressList() {
  await reqUserAddress().then(res => {
    if (res.code == 200) {
      siteList.value = res.data
    }
  })
}

const isSelect = ref(false)

onLoad(async (e: any) => {
  await getAddressList();
  if (e.isSelect) {
    isSelect.value = true
  }
})

const options = [{
  text: '删除',
  style: {
    backgroundColor: 'red',
  }
}]

const remove = async (id: String) => {
  await reqRemoveAddress({id}).then(async (res: any) => {
    if (res.code == 200) {
      uni.showToast({
        title: '删除成功',
        icon: 'none'
      })
      await getAddressList();
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
    uni.stopPullDownRefresh();

  })
}

const edit = (id: String) => {
  uni.navigateTo({
    url: '/pages/user/setting/addSite/addSite?id=' + id
  })
}

const selectAddress = (index: any) => {
  if (isSelect.value) {
    commonStore.addressItem = siteList.value[index]
    uni.navigateBack({
      delta: 1
    })
  }
}

onPullDownRefresh(async () =>{
  await getAddressList();
})

onShow(async () => {
  await getAddressList();
})

</script>

<template>
  <view class="bar"></view>

  <view>
    <u-swipe-action>
      <u-swipe-action-item
          v-for="(item, index) in siteList" :key="item.id"
          :options="options"
          @click="remove(item.id)"
      >
        <view class="item" @click="selectAddress(index)">
          <view class="top">
            <view class="name">{{ item.name }}</view>
            <view class="phone">{{ item.phone }}</view>
            <view class="tag">
              <text v-if="item.isDefault == '1'" class="red">
                默认
              </text>
            </view>
          </view>
          <view class="bottom">
            {{ item.province + item.city + item.country }} &nbsp; {{ item.detail }}
            <u-icon name="edit-pen" :size="30" color="#999999" @click="edit(item.id)"></u-icon>
          </view>
        </view>
      </u-swipe-action-item>
    </u-swipe-action>


    <view class="addSite" @tap="toAddSite">
      <view class="add">
        <u-icon name="plus" color="#ffffff" class="icon" :size="20"></u-icon>
        新建收货地址
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.item {
  padding: 40rpx 20rpx;

  .top {
    display: flex;
    font-weight: bold;
    font-size: 34rpx;

    .phone {
      margin-left: 60rpx;
    }

    .tag {
      display: flex;
      font-weight: normal;
      align-items: center;

      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 20rpx;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 30rpx;
        background-color: rgb(49, 145, 253);
      }

      .red {
        background-color: red
      }
    }
  }

  .bottom {
    display: flex;
    margin-top: 20rpx;
    font-size: 28rpx;
    justify-content: space-between;
    align-items: center;
    color: #999999;
  }
}

.addSite {
  display: flex;
  justify-content: space-around;
  width: 600rpx;
  line-height: 100rpx;
  position: absolute;
  bottom: 30rpx;
  left: 80rpx;
  background-color: #FF9E29;
  border-radius: 60rpx;
  font-size: 30rpx;

  .add {
    display: flex;
    align-items: center;
    color: #ffffff;

    .icon {
      margin-right: 10rpx;
    }
  }
}
</style>
